<script setup>
// 引入雷达图
import Radar from "./radar.vue";
import { onMounted, ref, defineProps, watch, nextTick } from "vue";
import { useRoute, useRouter } from "vue-router";

import {
  getBridgeBaseInfo,
  getBridgeFile,
  getWaterwayNotice,
  getMaritimeNotice,
  getBridgePlan,
  updateWaterwayNotice,
  updateMaritimeNotice,
  getWorkInfo,
  getBridgeEquipment,
} from "../../../utils/apis";

const route = useRoute();
const router = useRouter();
// 桥梁对应的tab
const props = defineProps({ id: Number, itemId: String });
const searchVal = ref("");
//桥梁id
const bridgeId = props.itemId || "";

//桥梁信息
let bridgeInfo = ref({});
let navigationHoleDataList = ref([]);
//桥梁文件信息
let bridgeFile = ref([]);
let bridgeFileType = "approval"; //默认查询审批文件类型
let pageNum = 1;
let sizeNum = 5;
const currentIndex = ref(0);
let totalPage = ref(0); //总页数
let waterWayNotice = ref([]); // 航道通告
let maritimeNotice = ref([]); // 海事通告
let bridgePlan = ref({}); // 桥梁方案
let bridgePlanProvince = ref([]); // 桥梁方案-省级部门
let bridgePlanCity = ref([]); // 桥梁方案-市级部门
let bridgePlanUnits = ref([]); // 桥梁方案-业主单位
const bridgeEquipmentData = ref({});
const ifShow = ref(false); //是否显示联系人弹窗
const connect = ref({}); //联系人和联系方式
const onClickButton = (searchKey, currentPageNum) => {
  pageNum = currentPageNum == null ? pageNum : currentPageNum;
  getBridgeFile(bridgeId, value1.value, pageNum, sizeNum, searchKey).then(
    (res) => {
      if (res.code === 200) {
        bridgeFile.value = res.data;
      }
    }
  );
};
const getBridgeFileByType = (value) => {
  currentIndex.value = 0;
  getBridgeFile(bridgeId, value, pageNum, sizeNum).then((res) => {
    if (res.code === 200) {
      bridgeFile.value = res.data;
      totalPage.value = Math.ceil(res.data.total / 5); //获取总页数
      return totalPage.value;
    }
  });
};
// 桥梁文件查看
const viewContent = (item) => {
  let title = bridgeInfo.value.bridgeName;
  if (item.fileType == "approval") {
    title = title + "审批文件";
  }
  if (item.fileType == "design") {
    title = title + "设计图纸";
  }
  if (item.fileType == "collisionDesign") {
    title = title + "防撞设施设计图纸";
  }
  if (item.fileType == "detection") {
    title = title + "检测资料";
  }
  router.push({
    path: "/viewContent",
    query: {
      type: "file",
      content: item.fileContent,
      fileName: title,
    },
  });
};
// 分页
const previousPage = () => {
  if (currentIndex.value == 0) {
    return;
  } else {
    currentIndex.value--;
    console.log(currentIndex.value);
    getBridgeFile(bridgeId, value1.value, currentIndex.value + 1, sizeNum).then(
      (res) => {
        if (res.code === 200) {
          bridgeFile.value = res.data;
        }
      }
    );
  }
};
const nextPage = () => {
  if (currentIndex.value == totalPage.value - 1) {
    return;
  } else {
    currentIndex.value++;
    getBridgeFile(bridgeId, value1.value, currentIndex.value + 1, sizeNum).then(
      (res) => {
        if (res.code === 200) {
          bridgeFile.value = res.data;
        }
      }
    );
  }
};
// 航道/海事通告查看
const viewNotice = (item, type) => {
  if (type == "waterway") {
    updateWaterwayNotice(item.id).then((res) => {});
  }
  if (type == "maritime") {
    updateMaritimeNotice(item.id).then((res) => {});
  }
  router.push({
    path: "/viewContent",
    query: {
      type: "notice",
      content: item.waterwayNoticeContent,
      fileName: item.waterwayNoticeTitle,
      departName: item.departName,
      noticeTime: item.waterwayNoticeTime,
    },
  });
};
// 一桥一方案
const viewBridgeTrouble = (content, type) => {
  let title = "";
  if (type == 1) {
    title = "船舶碰撞桥梁风险点";
  }
  if (type == 2) {
    title = "工作要求";
  }
  if (type == 3) {
    title = "船舶绕行疏导方案";
  }
  router.push({
    path: "/viewContent",
    query: {
      type: "bridgePlan",
      content: content,
      fileName: title,
    },
  });
};

const viewWorkInfo = (departCode) => {
  let workInfo = [];
  getWorkInfo(bridgePlan.value.id, departCode).then((res) => {
    if (res.code == 200) {
      res.data.forEach((item) => {
        workInfo.push(item.workContent);
      });
      router.push({
        path: "/viewContent",
        query: {
          type: "workInfo",
          content: workInfo,
          fileName: "工作内容",
        },
      });
    }
  });
};

const changeIfShow = (item) => {
  connect.value = item;
  ifShow.value = true;
};

const value1 = ref("approval");
const option1 = [
  { text: "桥梁审批文件", value: "approval" },
  { text: "桥梁设计图纸", value: "design" },
  { text: "桥梁防撞设施设计图纸", value: "collisionDesign" },
  { text: "桥梁检测资料", value: "detection" },
];
watch(bridgeId, (newVal, oldVal) => {}, {
  deep: true,
  immediate: true,
});
// 通航孔
const NavigationHoleList = ref(["通航孔1(双向通航)"]);
const view = ref(1);
const showOptionBox = ref(false);
const selectedNavigationHole = ref("");
const getNavigationHole = (val) => {
  selectedNavigationHole.value = val;
  console.log(selectedNavigationHole.value);
  if (selectedNavigationHole.value == "通航孔2(下航)") {
    view.value = 2;
  } else {
    view.value = 1;
  }
  showOptionBox.value = false;
};
const getNavigationHoleFn = () => {
  showOptionBox.value = true;
};
onMounted(() => {
  //获取桥梁基本信息
  getBridgeBaseInfo(bridgeId).then((res) => {
    if (res.code == 200) {
      bridgeInfo.value = res.data[0];
      console.log(res.data[0].navigationHoleData);
      navigationHoleDataList.value = res.data[0].navigationHoleData;
      selectedNavigationHole.value = "通航孔1(双向通航)";
      if (res.data[0].navigationHoleData) {
        if (res.data[0].navigationHoleData.length == 2) {
          NavigationHoleList.value = ["通航孔1(上航)", "通航孔2(下航)"];
          selectedNavigationHole.value = "通航孔1(上航)";
        } else if (res.data[0].navigationHoleData.length == 1) {
          selectedNavigationHole.value = "通航孔1(双向通航)";
        }
      }
    }
  });
  // 获取桥梁文件信息
  getBridgeFile(bridgeId, bridgeFileType, pageNum, sizeNum).then((res) => {
    if (res.code === 200) {
      bridgeFile.value = res.data;
      totalPage.value = Math.ceil(res.data.total / 5); //获取总页数
      return totalPage.value;
    }
  });
  // 获取航道通告
  getWaterwayNotice(bridgeId).then((res) => {
    if (res.code === 200) {
      waterWayNotice.value = res.data;
    }
  });
  // 获取海事通告
  getMaritimeNotice(bridgeId).then((res) => {
    if (res.code === 200) {
      maritimeNotice.value = res.data;
    }
  });
  // 获取一桥一方案
  getBridgePlan(bridgeId).then((res) => {
    if (res.code === 200) {
      bridgePlan.value = res.data;
      bridgePlan.value.departData.forEach((item) => {
        if (item.type === "province") {
          bridgePlanProvince.value.push(item);
        } else if (item.type === "city") {
          bridgePlanCity.value.push(item);
        } else {
          bridgePlanUnits.value.push(item);
        }
      });
    }
    console.log(bridgePlanProvince.value);
  });
  getBridgeEquipment(bridgeId).then((res) => {
    if (res.code === 200) {
      bridgeEquipmentData.value = res.data[0];
    }
  });
});
</script>

<template>
  <div class="main">
    <!-- 基本信息 -->
    <div class="Basicinformation" v-if="props && props.id == 1">
      <div class="top">
        <img class="img" src="../../../static/images/bigBridge.png" alt="" />
      </div>
      <div class="bottom">
        <div class="item">
          <div class="left">桥梁名称</div>
          <div class="right" style="color: rgba(0, 0, 0, 0.9)">
            {{ bridgeInfo.bridgeName || "--" }}
          </div>
        </div>
        <div class="item">
          <div class="left">地理位置</div>
          <div class="right" style="color: rgba(0, 0, 0, 0.9)">
            {{ bridgeInfo.locationname || "--" }}
          </div>
        </div>
        <div class="item">
          <div class="left">所属航道</div>
          <div class="right" style="color: rgba(0, 0, 0, 0.9)">
            {{ bridgeInfo.waterwayName || "--" }}
          </div>
        </div>
        <div class="item">
          <div class="left">业主单位</div>
          <div class="right" style="color: rgba(0, 0, 0, 0.9)">
            {{ bridgeInfo.ownerunitname || "--" }}
          </div>
        </div>
        <div class="item">
          <div class="left">主管部门</div>
          <div class="right" style="color: rgba(0, 0, 0, 0.9)">
            {{ bridgeInfo.departname || "--" }}
          </div>
        </div>
        <div class="item">
          <div class="left">桥梁长度</div>
          <div class="right" style="color: rgba(0, 0, 0, 0.9)">
            {{ bridgeInfo.bridgeLength || "--" }}m
          </div>
        </div>
        <div class="item">
          <div class="left">桥梁宽度</div>
          <div class="right" style="color: rgba(0, 0, 0, 0.9)">
            {{ bridgeInfo.bridgeWidth || "--" }}m
          </div>
        </div>
        <div class="item">
          <div class="left">建成年份</div>
          <div class="right" style="color: rgba(0, 0, 0, 0.9)">
            {{ bridgeInfo.yearBuilt || "--" }}年
          </div>
        </div>
        <div class="item">
          <div class="left">通车年份</div>
          <div class="right" style="color: rgba(0, 0, 0, 0.9)">
            {{ bridgeInfo.yearOpen || "--" }}年
          </div>
        </div>
        <div class="item">
          <div class="left">剩余使用年限</div>
          <div class="right" style="color: rgba(0, 0, 0, 0.9)">
            {{ bridgeInfo.yearRemain || "--" }}年
          </div>
        </div>
        <div class="item">
          <div class="left">桥梁类型</div>
          <div class="right" style="color: rgba(0, 0, 0, 0.9)">
            {{ bridgeInfo.bridgeType || "--" }}
          </div>
        </div>
        <div class="item">
          <div class="left">所在航道等级</div>
          <div class="right" style="color: rgba(0, 0, 0, 0.9)">
            {{ bridgeInfo.maintenanceLevel || "--" }}
          </div>
        </div>
        <div class="item">
          <div class="left">桥梁防撞设施</div>
          <div class="right" style="color: rgba(0, 0, 0, 0.9)">
            {{ bridgeInfo.bridgeFacility || "--" }}
          </div>
        </div>
        <div class="item">
          <div class="left">桥梁标志标识配布</div>
          <div class="right" style="color: rgba(0, 0, 0, 0.9)">
            {{ bridgeInfo.signMark || "--" }}
          </div>
        </div>
      </div>
      <div class="bottom">
        <div class="selectBox">
          <div class="item">
            <input
              class="navigationHole"
              type="text"
              placeholder="请选择"
              readonly="readonly"
              v-model="selectedNavigationHole"
              @click="getNavigationHoleFn"
            />
            <div class="optionBox" v-if="showOptionBox">
              <div class="optionItem">
                <li
                  v-for="item in NavigationHoleList"
                  @click="getNavigationHole(item)"
                  :key="item"
                >
                  {{ item }}
                </li>
              </div>
            </div>
          </div>
        </div>
        <div class="navigationHoleBox">
          <div class="item">
            <div class="left">批文通航净宽/净高</div>
            <div class="right" style="color: rgba(0, 0, 0, 0.9)">
              {{
                (navigationHoleDataList[view - 1] &&
                  navigationHoleDataList[view - 1].approvalNetWidth) ||
                "--"
              }}/{{
                (navigationHoleDataList[view - 1] &&
                  navigationHoleDataList[view - 1].approvalNetHeight) ||
                "--"
              }}
            </div>
          </div>
          <div class="item">
            <div class="left">实测通航净宽/净高</div>
            <div class="right" style="color: rgba(0, 0, 0, 0.9)">
              {{
                (navigationHoleDataList[view - 1] &&
                  navigationHoleDataList[view - 1].measureNetWidth) ||
                "--"
              }}/{{
                (navigationHoleDataList[view - 1] &&
                  navigationHoleDataList[view - 1].measureNetHeight) ||
                "--"
              }}
            </div>
          </div>
          <div class="item">
            <div class="left">实时通航净高</div>
            <div class="right" style="color: rgba(0, 0, 0, 0.9)">
              {{
                (navigationHoleDataList[view - 1] &&
                  navigationHoleDataList[view - 1].realtimeNetWidth) ||
                "--"
              }}
            </div>
          </div>
          <div class="item">
            <div class="left">批文通航孔上底宽</div>
            <div class="right" style="color: rgba(0, 0, 0, 0.9)">
              {{
                (navigationHoleDataList[view - 1] &&
                  navigationHoleDataList[view - 1].approvalUpWidth) ||
                "--"
              }}
            </div>
          </div>
          <div class="item">
            <div class="left">实测通航孔上底宽</div>
            <div class="right" style="color: rgba(0, 0, 0, 0.9)">
              {{
                (navigationHoleDataList[view - 1] &&
                  navigationHoleDataList[view - 1].measureUpWidth) ||
                "--"
              }}
            </div>
          </div>
          <div class="item">
            <div class="left">批文通航孔侧高</div>
            <div class="right" style="color: rgba(0, 0, 0, 0.9)">
              {{
                (navigationHoleDataList[view - 1] &&
                  navigationHoleDataList[view - 1].approvalHeightHole) ||
                "--"
              }}
            </div>
          </div>
          <div class="item">
            <div class="left">实测通航孔侧高</div>
            <div class="right" style="color: rgba(0, 0, 0, 0.9)">
              {{
                (navigationHoleDataList[view - 1] &&
                  navigationHoleDataList[view - 1].measureHeightHole) ||
                "--"
              }}
            </div>
          </div>
          <div class="item">
            <div class="left">设计最高通航水位（85高程,米）</div>
            <div class="right" style="color: rgba(0, 0, 0, 0.9)">
              {{
                (navigationHoleDataList[view - 1] &&
                  navigationHoleDataList[view - 1].heightNavigationDesign) ||
                "--"
              }}
            </div>
          </div>
          <div class="item">
            <div class="left">通航孔跨径</div>
            <div class="right" style="color: rgba(0, 0, 0, 0.9)">
              {{
                (navigationHoleDataList[view - 1] &&
                  navigationHoleDataList[view - 1].navigationHoleSpan) ||
                "--"
              }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 桥梁画像 -->
    <div class="BridgePortrait" v-if="props && props.id == 2">
      <Radar :bridgeId="bridgeId" ></Radar>
    </div>
    <!-- 桥梁文件 -->
    <div class="BridgeDocuments" v-if="props && props.id == 3">
      <div class="inner">
        <!-- 搜索框 -->
        <van-search
          v-model="searchVal"
          show-action
          placeholder="请输入关键字查询"
          @search="onSearch"
        >
          <template #action>
            <div @click="onClickButton(searchVal)">搜索</div>
          </template>
        </van-search>
        <!-- 下拉框 -->
        <div class="option">
          <van-dropdown-menu>
            <van-dropdown-item
              v-model="value1"
              :options="option1"
              @change="getBridgeFileByType(value1)"
            />
          </van-dropdown-menu>
        </div>
        <!-- 文件 -->
        <div class="document">
          <table cellpadding="4" class="table">
            <tr>
              <th>序号</th>
              <th>审批文件</th>
              <th>备注</th>
              <th>操作</th>
            </tr>
            <tr v-for="(item, index) in bridgeFile.list">
              <td class="td">{{ index + 1 }}</td>
              <td class="td">{{ item.fileName }}</td>
              <td class="td"></td>
              <td class="handle td" v-on:click="viewContent(item)">查看</td>
            </tr>
          </table>
          <div class="leftPaginate" @click="previousPage"></div>
          <div class="rightPaginate" @click="nextPage"></div>
          <div class="dot">
            <div
              class="item"
              v-for="(item, index) in 6"
              :class="currentIndex == index ? 'active' : 'item'"
              :key="index"
            ></div>
          </div>
        </div>
      </div>
    </div>
    <!-- 相关通告 -->
    <div class="RelevantAnnouncement" v-if="props && props.id == 4">
      <!-- 相关通告 -->
      <div class="reTop">
        <div class="title">航道通告</div>
        <div
          class="reItem"
          v-for="item in waterWayNotice"
          v-on:click="viewNotice(item, 'waterway')"
        >
          <div
            class="reLeft"
            :style="
              item.waterwayNoticeStatus == 1
                ? { background: 'rgba(0,0,0,0.2)' }
                : {}
            "
          ></div>
          <div
            class="reRight"
            :style="
              item.waterwayNoticeStatus == 1 ? { color: 'rgba(0,0,0,0.6)' } : {}
            "
          >
            {{ item.waterwayNoticeTitle }}
          </div>
        </div>
      </div>
      <!-- 海事通告 -->
      <div class="reTop bottomOut">
        <div class="title">海事通告</div>
        <div
          class="reItem"
          v-for="item in maritimeNotice"
          v-on:click="viewNotice(item, 'maritime')"
        >
          <div
            class="reLeft"
            :style="
              item.maritimeNoticeStatus == 1
                ? { background: 'rgba(0,0,0,0.2)' }
                : {}
            "
          ></div>
          <div
            class="reRight"
            :style="
              item.maritimeNoticeStatus == 1 ? { color: 'rgba(0,0,0,0.6)' } : {}
            "
          >
            {{ item.maritimeNoticeTitle }}
          </div>
        </div>
      </div>
    </div>
    <!-- 一桥一方案 -->
    <div class="BridgeScheme" v-if="props && props.id == 5">
      <!-- 桥梁隐患 -->
      <div
        class="BridgeDocumentTopItem"
        v-on:click="viewBridgeTrouble(bridgePlan.bridgeTroubleSpot, 1)"
      >
        <div class="left">
          <img
            class="img"
            src="../../../static/images/Slice29.png"
            alt=""
            srcset=""
          />
        </div>
        <div class="right">桥梁隐患点</div>
      </div>
      <!-- 工作要求 -->
      <div
        class="BridgeDocumentTopItem"
        v-on:click="viewBridgeTrouble(bridgePlan.jobRequirements, 2)"
      >
        <div class="left">
          <img
            class="img"
            src="../../../static/images/Slice29(1).png"
            alt=""
            srcset=""
          />
        </div>
        <div class="right">工作要求</div>
      </div>
      <!-- 绕行方案 -->
      <div
        class="BridgeDocumentTopItem"
        v-on:click="viewBridgeTrouble(bridgePlan.shipDregePlan, 3)"
      >
        <div class="left">
          <img
            class="img"
            src="../../../static/images/Slice29(2).png"
            alt=""
            srcset=""
          />
        </div>
        <div class="right">船舶疏导绕行方案</div>
      </div>
      <!-- 各部门职责 -->
      <div class="departmentalResponsibility">
        <div class="depTop">
          <div class="left">
            <img
              class="img"
              src="../../../static/images/Slice29(3).png"
              alt=""
              srcset=""
            />
          </div>
          <div class="right">各部门职责</div>
        </div>
        <!-- 省级部门 -->
        <div class="provincial">
          <div class="proTitle">省级部门</div>
          <!-- 上面 -->
          <div class="itemBox">
            <div
              class="item"
              style="margin-bottom: 8px"
              v-for="item in bridgePlanProvince"
            >
              <div class="itemLeft">
                <div class="itemLeftTop">{{ item.name }}</div>
                <div class="itemLeftBottom">
                  <div
                    class="itemLeftBottomL"
                    @click="viewWorkInfo(item.departCode)"
                  >
                    <span class="number">{{ item.workNum }}</span
                    ><span class="text">项工作</span>
                  </div>
                  <div class="itemLeftBottomR">
                    <span style="color: #00c462" @click="changeIfShow(item)"
                      >联系</span
                    >
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 市级部门 -->
        <div class="city">
          <div class="cityTitle">市级部门</div>
          <!-- 上面 -->
          <div class="itemBox">
            <div
              class="item"
              style="margin-bottom: 8px"
              v-for="item in bridgePlanCity"
            >
              <div class="itemLeft">
                <div class="itemLeftTop">{{ item.name }}</div>
                <div class="itemLeftBottom">
                  <div
                    class="itemLeftBottomL"
                    @click="viewWorkInfo(item.deaprtCode)"
                  >
                    <span class="number">{{ item.workNum }}</span
                    ><span class="text">项工作</span>
                  </div>
                  <div class="itemLeftBottomR">
                    <span style="color: #00c462" @click="changeIfShow(item)"
                      >联系</span
                    >
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 业主单位 -->
        <div class="unit">
          <div class="unitTitle">业主单位</div>
          <div class="unitBox" v-for="item in bridgePlanUnits">
            <div class="unitTop">{{ item.name }}</div>
            <div class="unitBottom">
              <div
                class="unitLeftBottomL"
                @click="viewWorkInfo(item.deaprtCode)"
              >
                <span class="number">{{ item.workNum }}</span
                ><span class="text">项工作</span>
              </div>
              <div class="unitLeftBottomR">
                <span style="color: #00c462" @click="changeIfShow(item)"
                  >联系</span
                >
              </div>
            </div>
          </div>
        </div>
      </div>
      <van-popup v-model:show="ifShow" closeable round>
        <div class="accBox">
          <div class="title">
            <span>{{ connect.name }}</span>
          </div>
          <div class="connectPerson">联系人：{{ connect.charge }}</div>
          <div class="phone">联系方式：{{ connect.phone }}</div>
        </div>
      </van-popup>
    </div>
    <!-- 监控设备 -->
    <div class="MonitoringEquipment" v-if="props && props.id == 6">
      <!-- 上面 -->
      <div class="itemBox">
        <div class="item">
          <div class="itemTop">
            <span class="name">视频NVR</span>
            <span class="num">{{ bridgeEquipmentData.nvrNum }}个</span>
          </div>
          <div class="itemBottom">
            <span class="textRate">在线率</span>
            <span
              :class="[
                Math.trunc(bridgeEquipmentData.nvrOnlineRate) >= 80
                  ? 'green'
                  : '',
                Math.trunc(bridgeEquipmentData.nvrOnlineRate) >= 60 &&
                Math.trunc(bridgeEquipmentData.nvrOnlineRate) < 80
                  ? 'orange'
                  : '',
                Math.trunc(bridgeEquipmentData.nvrOnlineRate) < 60 ? 'red' : '',
              ]"
              >{{
                bridgeEquipmentData.smartBoxOnlineRate == null
                  ? "--"
                  : Math.trunc(bridgeEquipmentData.nvrOnlineRate)
              }}%</span
            >
          </div>
        </div>
        <div class="item">
          <div class="itemTop">
            <span class="name">激光设备</span>
            <span class="num">{{ bridgeEquipmentData.laserEquipNum }}个</span>
          </div>
          <div class="itemBottom">
            <span class="textRate">在线率</span>
            <span
              :class="[
                Math.trunc(bridgeEquipmentData.laserEquipOnlineRate) >= 80
                  ? 'green'
                  : '',
                Math.trunc(bridgeEquipmentData.laserEquipOnlineRate) >= 60 &&
                Math.trunc(bridgeEquipmentData.laserEquipOnlineRate) < 80
                  ? 'orange'
                  : '',
                Math.trunc(bridgeEquipmentData.laserEquipOnlineRate) < 60
                  ? 'red'
                  : '',
              ]"
              >{{
                bridgeEquipmentData.smartBoxOnlineRate == null
                  ? "--"
                  : Math.trunc(bridgeEquipmentData.laserEquipOnlineRate)
              }}%</span
            >
          </div>
        </div>
        <div class="item">
          <div class="itemTop">
            <span class="name">雷达设备</span>
            <span class="num">{{ bridgeEquipmentData.radarEquipNum }}个</span>
          </div>
          <div class="itemBottom">
            <span class="textRate">在线率</span>
            <span
              :class="[
                Math.trunc(bridgeEquipmentData.radarEquipOnlineRate) >= 80
                  ? 'green'
                  : '',
                Math.trunc(bridgeEquipmentData.radarEquipOnlineRate) >= 60 &&
                Math.trunc(bridgeEquipmentData.radarEquipOnlineRate) < 80
                  ? 'orange'
                  : '',
                Math.trunc(bridgeEquipmentData.radarEquipOnlineRate) < 60
                  ? 'red'
                  : '',
              ]"
              >{{
                bridgeEquipmentData.smartBoxOnlineRate == null
                  ? "--"
                  : Math.trunc(bridgeEquipmentData.radarEquipOnlineRate)
              }}%</span
            >
          </div>
        </div>
        <div class="item">
          <div class="itemTop">
            <span class="name">智能箱设备</span>
            <span class="num">{{ bridgeEquipmentData.smartBoxNum }}个</span>
          </div>
          <div class="itemBottom">
            <span class="textRate">在线率</span>
            <span
              :class="[
                Math.trunc(bridgeEquipmentData.smartBoxOnlineRate) >= 80
                  ? 'green'
                  : '',
                Math.trunc(bridgeEquipmentData.smartBoxOnlineRate) >= 60 &&
                Math.trunc(bridgeEquipmentData.smartBoxOnlineRate) < 80
                  ? 'orange'
                  : '',
                Math.trunc(bridgeEquipmentData.smartBoxOnlineRate) < 60
                  ? 'red'
                  : '',
              ]"
              >{{
                bridgeEquipmentData.smartBoxOnlineRate == null
                  ? "--"
                  : Math.trunc(bridgeEquipmentData.smartBoxOnlineRate)
              }}%</span
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.main {
  overflow-y: auto;
  // background: #fff;
  // 基本信息
  .Basicinformation {
    height: auto;
    background: #fff;
    padding: 12px 16px 0px 16px;
    // margin-bottom: 80px;
    .top {
      margin-bottom: 12px;
      .img {
        height: 146px;
        width: 100%;
      }
    }
    .bottom {
      background-color: #fff;
      padding: 16px;
      box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
      border-radius: 6px 6px 6px 6px;
      margin-bottom: 16px;
      .item {
        margin-bottom: 16px;
        font-size: 14px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.6);
        display: flex;
        justify-content: space-between;
      }
      .selectBox {
        .navigationHole {
          height: 24px;
          line-height: 26px;
          outline: none;
          border: none;
          border: 1px solid #ccc;
          width: 50%;
          font-size: 12px;
          font-weight: 400;
          color: rgba(0, 0, 0, 0.4);
          padding-left: 10px;
          border-radius: 4px;
        }
        .item {
          position: relative;
          .optionBox {
            height: 80px;
            width: 50%;
            background: #ffffff;
            position: absolute;
            top: 30px;
            overflow: hidden;
            z-index: 10;
            padding-bottom: 12px;
            .optionItem {
              position: absolute;
              height: auto;
              width: calc(100% + 8px);
              height: calc(100% + 8px);
              overflow: scroll;
              top: 0;
              background: #fff;
              li {
                margin: 0;
                padding-left: 8px;
                list-style: none;
                color: #000000;
                background: #fff;
                font-size: 12px;
                padding: 4px 0 4px 4px;
              }
            }
          }
        }
      }
    }
  }
  // 桥梁画像
  .BridgePortrait {
    background: #fff;
    padding: 12px 16px 1px 16px;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
    border-radius: 6px 6px 6px 6px;
    // margin-bottom: 66px;
  }
  // 桥梁文件
  .BridgeDocuments {
    margin: 12px 16px 1px 16px;
    background: #ffffff;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
    border-radius: 6px 6px 6px 6px;
    .inner {
      padding: 16px 16px 24px 16px;

      .select {
        width: 100%;
        background: #f5f5f5;
        border: none;
        margin-top: 16px;
      }
    }
    ::v-deep .van-search {
      padding: 0;
      margin-bottom: 16px;
    }
    ::v-deep .van-search__action {
      background: rgba(38, 111, 232, 0.7);
      margin-left: 16px;
      border-radius: 4px 4px 4px 4px;
      font-size: 14px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #ffffff;
      padding: 0 18px;
    }
    .option {
      width: 100%;
      ::v-deep .van-dropdown-menu {
        height: 36px;
        position: relative;
      }
      ::v-deep .van-dropdown-menu::after {
        position: absolute;
        top: 50%;
        margin-top: -10px;
        border: 3px solid;
        border-color: transparent transparent #266fe8 #266fe8;
        transform: rotate(-45deg);
        opacity: 0.8;
        content: "";
        width: 8px;
        height: 8px;
        margin-right: 10px;
        right: 16px;
      }
      ::v-deep .van-dropdown-menu__bar {
        height: 36px;
      }
      ::v-deep .van-dropdown-menu__item {
        justify-content: start;
        background: #f5f5f5;
      }
      ::v-deep .van-dropdown-menu__title:after {
        display: none;
      }
    }
    .document {
      opacity: 1;
      border-radius: 4px;
      margin-top: 16px;
      position: relative;
      .table {
        width: 100%;
        margin-bottom: 12px;
        border-collapse: separate;
        border-spacing: 0;
        border-radius: 10px;
        th {
          border: 1px solid rgba(38, 111, 232, 0.2);
          background: rgba(38, 111, 232, 0.15);
          font-size: 14px;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(0, 0, 0, 0.9);
        }
        .td {
          border: 1px solid rgba(38, 111, 232, 0.2);
          font-size: 14px;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(0, 0, 0, 0.9);
          text-align: center;
        }
        .handle {
          color: #266fe8;
        }
      }
      .table tr:first-child th:first-child {
        border-top-left-radius: 4px; /* 设置table左下圆角 */
      }
      .table tr:first-child th:last-child {
        border-top-right-radius: 4px; /* 设置table右下圆角 */
      }
      .table tr:last-child td:first-child {
        border-bottom-left-radius: 4px; /* 设置table左下圆角 */
      }
      .table tr:last-child td:last-child {
        border-bottom-right-radius: 4px; /* 设置table右下圆角 */
      }
      .leftPaginate {
        width: 36px;
        height: 36px;
        background: linear-gradient(
          270deg,
          #e5e5e5 53%,
          rgba(229, 229, 229, 0) 100%
        );
        position: absolute;
        top: 40%;
        left: -20px;
        border-radius: 50%;
      }
      .leftPaginate::before {
        content: "";
        width: 13px;
        height: 13px;
        border-top: 2px solid #266fe8;
        border-left: 2px solid #266fe8;
        position: absolute;
        transform: rotate(-45deg);
        left: 11px;
        top: 30%;
      }
      .rightPaginate {
        width: 36px;
        height: 36px;
        background: linear-gradient(
          90deg,
          #e5e5e5 53%,
          rgba(229, 229, 229, 0) 100%
        );
        position: absolute;
        top: 40%;
        right: -20px;
        border-radius: 50%;
      }
      .rightPaginate::before {
        content: "";
        width: 13px;
        height: 13px;
        border-top: 2px solid #266fe8;
        border-left: 2px solid #266fe8;
        position: absolute;
        transform: rotate(135deg);
        right: 11px;
        top: 30%;
      }
      .dot {
        display: flex;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        -ms-transform: translateX(-50%); /* IE 9 */
        -moz-transform: translateX(-50%); /* Firefox */
        -webkit-transform: translateX(-50%); /* Safari 和 Chrome */
        -o-transform: translateX(-50%); /* Opera */
        .item {
          width: 8px;
          height: 8px;
          background: #dbdbdb;
          border-radius: 50%;
          margin-right: 10px;
        }
        .active {
          background: #276fe8;
        }
        .item:last-child {
          margin-right: 0;
        }
      }
    }
    ::v-deep .van-pagination__item {
      border-radius: 2px 2px 2px 2px;
      color: rgba(0, 0, 0, 0.2);
    }
  }
  // 相关通告
  .RelevantAnnouncement {
    margin: 12px 16px 0px 16px;
    .reTop {
      /* background-color: aqua; */
      padding: 16px 16px 16px 16px;
      background: #ffffff;
      box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
      border-radius: 6px 6px 6px 6px;
      margin-bottom: 16px;
      .title {
        font-size: 14px;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #000000;
        /* background-color: aquamarine; */
        position: relative;
        margin-bottom: 8px;
      }
      .title::before {
        content: "";
        width: 2px;
        height: 12px;
        position: absolute;
        left: -16px;
        top: 4px;
        background-color: #276fe8;
      }
      .reItem {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 8px 8px 8px 0;
        background: rgba(0, 0, 0, 0.05);
        border-radius: 4px 4px 4px 4px;
        margin-bottom: 4px;
        font-size: 12px;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        /* color: rgba(0,0,0,0.9); */
        /* 已经阅读的字体颜色 */
        color: rgba(0, 0, 0, 0.9);
        .reLeft {
          width: 8px;
          height: 8px;
          background: #266fe8;
          margin-right: 8px;
          margin-left: 8px;
          border-radius: 50%;
          padding: 0.5px;
        }
        .reRight {
          flex: 1;
        }
      }
    }
  }
  // 一桥一方案
  .BridgeScheme {
    margin: 12px 16px 16px 16px;
    background: #ffffff;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
    border-radius: 6px 6px 6px 6px;
    .img {
      width: 26px;
      height: 26px;
      margin: 0 16px;
    }
    .BridgeDocumentTopItem {
      display: flex;
      align-items: center;
      padding: 22px 0 24px 0;
      margin-bottom: 8px;
      box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.09);
      .right {
        color: rgba(0, 0, 0, 0.9);
        font-size: 14px;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.9);
      }
    }
    .departmentalResponsibility {
      padding: 22px 0 24px 0;
      .depTop {
        display: flex;
        align-items: center;
        .right {
          font-size: 14px;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: rgba(0, 0, 0, 0.9);
        }
      }
      .provincial,
      .city {
        //  display: flex;
        //  flex-direction: column;
        //  width: 100%;
        //  flex-wrap: nowrap;
        .proTitle,
        .cityTitle {
          font-size: 14px;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #000000;
          padding-left: 16px;
          margin-bottom: 8px;
        }
        .itemBox {
          display: flex;
          flex-wrap: wrap;
          .item {
            // display: flex;
            // padding: 0 16px;
            margin-left: 16px;
            margin-bottom: 8px;
            width: 127px;
            // justify-content: space-between;
            // flex-wrap: wrap;
            background: rgba(38, 111, 232, 0.1);
            border-radius: 4px 4px 4px 4px;

            flex-direction: column;
            justify-content: center;
            // flex-wrap: nowrap;
            padding: 12px 10px 12px 12px;
            .itemLeft,
            .itemRight {
              .itemLeftTop,
              .itemRightTop {
                margin-bottom: 12px;
                font-size: 12px;
                font-family: PingFang SC-Medium, PingFang SC;
                font-weight: 500;
                color: rgba(0, 0, 0, 0.7);
              }
              .itemLeftBottom,
              .itemRightBottom {
                display: flex;
                // justify-content: space-evenly;
                align-items: center;
                .itemLeftBottomL,
                .itemRightBottomL {
                  // margin-right: 31px;
                  font-family: PingFang SC-Medium, PingFang SC;
                  font-weight: 500;
                  color: #266fe8;
                  flex: 1;
                  .number {
                    font-size: 20px;
                  }
                  .text {
                    font-size: 14px;
                  }
                }
                .itemLeftBottomR,
                .itemRightBottomR {
                  padding: 2px 6px;
                  border-radius: 4px 4px 4px 4px;
                  opacity: 1;
                  border: 2px solid #00c462;
                  font-size: 12px;
                  font-family: PingFang SC-Regular, PingFang SC;
                  font-weight: 400;
                }
              }
            }
            .itemLeft:first-of-type {
              // margin-right: 8px
            }
          }
          .item:nth-child(2n) {
            margin-left: 8px;
          }
        }
      }
      // 业主
      .unit {
        .unitTitle {
          font-size: 12px;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          padding-left: 16px;
          margin-bottom: 8px;
        }
        .unitBox {
          margin: 0 16px;
          border-radius: 4px 4px 4px 4px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          padding: 10px 8px 10px 10px;
          background: rgba(38, 111, 232, 0.1);
          .unitTop {
            margin-bottom: 12px;
            font-size: 14px;
            font-family: PingFang SC-Medium, PingFang SC;
            font-weight: 500;
            color: rgba(0, 0, 0, 0.7);
          }
          .unitBottom {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .unitLeftBottomL {
              margin-right: 26px;
              font-family: PingFang SC-Medium, PingFang SC;
              font-weight: 500;
              color: #266fe8;
              .number {
                font-size: 20px;
              }
              .text {
                font-size: 14px;
              }
            }
            .unitLeftBottomR {
              padding: 2px 8px;
              border-radius: 4px 4px 4px 4px;
              opacity: 1;
              border: 2px solid #00c462;
              font-size: 12px;
              font-family: PingFang SC-Regular, PingFang SC;
              font-weight: 400;
            }
          }
        }
      }
    }
  }
  // 监控设备
  .MonitoringEquipment {
    padding: 0 15px 0 16px;
    .itemBox {
      display: flex;
      margin-top: 12px;
      flex-wrap: wrap;
      .item {
        width: 134px;
        height: 60px;
        padding: 16px;
        background: rgba(38, 111, 232, 0.1);
        margin-right: 12px;
        margin-bottom: 12px;
        border-radius: 6px 6px 6px 6px;
        .itemTop {
          display: flex;
          justify-content: space-between;
          margin-bottom: 20px;
          span {
            display: block;
          }
          .name {
            font-size: 16px;
            font-family: PingFang SC-Regular, PingFang SC;
            font-weight: 400;
            color: #000000;
          }
          .num {
            font-size: 14px;
            font-family: PingFang SC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(0, 0, 0, 0.6);
          }
        }
        .itemBottom {
          display: flex;
          justify-content: space-between;
          position: relative;
          span {
            display: block;
          }
          .textRate {
            font-size: 14px;
            font-family: PingFang SC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(0, 0, 0, 0.6);
            padding-top: 6px;
          }
          border-radius: 4px 4px 4px 4px;
          opacity: 1;
          font-size: 24px;
          .green {
            color: #00c462;
          }
          .red {
            color: #e10000;
          }
          .orange {
            color: orange;
          }
        }
      }
      .item:nth-child(2n) {
        margin-right: 0px;
      }
    }
  }

  // 联系人弹窗
  .accBox {
    width: 312px;
    height: 122px;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    .title {
      margin-top: 16px;
      margin-bottom: 18px;
      margin-left: 20px;
      font-size: 16px;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: bold;
      color: rgba(0, 0, 0, 0.9);
      display: flex;
      flex-direction: row;
      position: relative;
      text-align: left;
    }
    .connectPerson,
    .phone {
      font-size: 14px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.9);
      text-align: left;
      margin-left: 20px;
      display: flex;
      flex-direction: row;
      position: relative;
      margin-bottom: 7px;
    }
  }
}
</style>